<template>
  <div class="user-view">
    <div class="user-header">
      <img class="user-avatar" src="https://cdn.jsdelivr.net/gh/avatars/bighead.png" alt="用户头像" />
      <div class="user-info">
        <h2>用户名：wyy</h2>
        <p>角色：普通用户</p>
        <p>邮箱：user@example.com</p>
      </div>
    </div>
    <div class="user-section">
      <h3>个人简介</h3>
      <p>这里是用户的个人简介，可以介绍自己的法律需求、兴趣等。</p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 可根据实际需求引入 pinia、api 等
</script>

<style scoped>
.user-view {
  max-width: 900px;
  margin: 40px auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 32px 24px;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 24px;
  border: 3px solid #2196f3;
  background: #f5f8fa;
}
.user-info h2 {
  margin: 0 0 8px 0;
  font-size: 22px;
  color: #2196f3;
}
.user-info p {
  margin: 2px 0;
  color: #666;
}
.user-section h3 {
  margin-bottom: 8px;
  color: #4a6fa1;
}
.user-section p {
  color: #444;
  line-height: 1.7;
}
</style> 